<template>
	<view class="page">
		<!-- <u-navbar ref="navbar" title="我的预约" @leftClick="leftClick" :autoBack="true">
		</u-navbar> -->
		<scroll-view :scroll-top="scrollTop" show-scrollbar="true" scroll-y="true" style="height:100vh; "
			:style="{ marginTop: navbarHeight + 'px' }" @scrolltolower="loadMore" @scroll="watchScroll">
			<view @click="godefail(item.reservationCode)" class="box" v-for="(item, index) in winelist" :key="index"
				:style="{ marginTop: (index === 0 ? '0' : '0') + 'px' }">
				<view class="wineinfo">
					<image style="width: 4rem;height: 4rem;" :src="item.wine.imageUrl" mode="scaleToFill"></image>
					<view style="margin-left: 0.5rem;width: 80%;">
						<view style="font-size: 1.1rem;"> {{item.wine.wname}}</view>
						<view style="font-size: 0.9rem;" class="flex-container j-sbe">
							<view>品种：{{item.wine.type}}</view>
							<view>价格：{{item.wine.price}}</view>
						</view>
					</view>
				</view>
				<view class="reseveinfo">
					<view class="flex-container j-sbe">
						<text>预约时间:{{item.reservationDate}}</text><text
							style="margin-left: 1rem;">数量:{{item.quantity}}</text>
					</view>
					<view class="flex-container j-sbe" style="margin-top: 0.3rem;">
						总价:{{item.totalPrice}}<text style="color: red;">{{item.status==="拒绝"?"预约失败":"预约成功"}}</text>
					</view>
				</view>
			</view>
			<view style="height: 0.5rem;">

			</view>
			<!-- <view v-if="loadingMore" class="loading">加载中...</view> -->
		</scroll-view>
		<u-back-top top="400" icon="arrow-up" :right="backTopData.right" :customStyle="backTopData.customStyle"
			:bottom="backTopData.bottom" :icon="backTopData.icon" :mode="backTopData.mode"
			:iconStyle="backTopData.iconStyle" :duration="backTopData.duration" :scrollTop="scrollTop"
			@click="backToTop()"></u-back-top>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				winelist: [],
				currentPage: 1, // 当前页数
				totalPage: 1, // 总页数
				navbarHeight: 0,
				loadingMore: false,
				scrollTop: 0,
				backTopData: {
					mode: 'circle',
					icon: 'arrow-upward',
					bottom: 100,
					customStyle: {
						backgroundColor: '#cecece',
					},
					iconStyle: {
						color: "#ffffff",
					},
					right: 20,
					duration: 300
				},
			};
		},
		created() {
			this.loadData();
		},
		onLoad() {
			this.backTopData.icon = "arrow-up"
		},

		mounted() {
			// this.getNavbarHeight();
		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			}
		},
		methods: {
			watchScroll(e) {
				console.log(e, 'jjjj');
				this.scrollTop = e.detail.scrollTop;
			},
			leftClick() {
				console.log('jjj');
				uni.switchTab({
					url: "/pages/tabBar/my/index"
				});
			},
			godefail(val) {
				uni.navigateTo({
					url: `/pages/tabBar/yuyue/details/result/defail?code=${val}`
				})
			},
			backToTop() {
				// 设置 scrollTop 为 0，页面会滚动到顶部
				this.scrollTop = 0;
			},
			async loadData() {
				const param = {
					userId: this.userId,
					current: this.currentPage,
					size: 10
				};
				const res = await this.$request.get('/system/wine-reservation/chaList', param);

				if (res.code === 200) {
					this.winelist = this.winelist.concat(res.data.list.records);
					this.totalPage = res.data.list.pages;
					console.log(this.winelist);
				}
			},
			async loadMore() {
				console.log('kkkkk');
				// 如果当前页数小于总页数，则加载下一页数据
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
					this.loadingMore = true;
					await this.loadData();
				}
			},
			getNavbarHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.u-navbar__content').boundingClientRect(data => {
					this.navbarHeight = 44 + 'px';
					console.log(data);
				}).exec();
			}
		}
	};
</script>

<style>
	.box {
		padding: 0.6rem 0.5rem;

		margin-bottom: 1rem;
	}

	.wineinfo {
		display: flex;
		justify-content: flex-start;
	}

	.reseveinfo {
		font-size: 0.8rem;
		margin-top: 0.4rem;
	}
</style>